<template>
  <div class="register">
    <div class="body">
      <div class="top"></div>
      <div class="left">
        <img class="left-img" src="@/assets/img/register.jpg">
      </div>
      <div class="right">
        <div class="content">
          <div class="loginend">
            <div class="title">用户登录</div>
            <form>
              <input class="input" type="text" v-model="phone" v-bind="loginIng" placeholder="请输入11位手机号">
              <input class="input" type="text" v-model="passwords" placeholder="请输入8-12位密码">
              <input type="button" :disabled="!isregist" class="log" :class="{regid_active: sendregis, 'regis_begin': regisin}" value="登录" v-bind="loginIng">
            </form>
            <div class="reged">没有找地网账户
              <router-link class="reg" to="/register">立即注册</router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Loginend',
  data () {
    return {
      phone: '',
      passwords: '',
      isregist: false,
      // 输入框为空时
      sendregis: true,
      // 输入框比填写完毕
      regisin: false,
      iphones: ''
    }
  },
  // 计算属性试试监听data里的数据变化
  computed: {
    loginIng () {
      if (this.phone && this.passwords !== '') {
        this.isregist = true
        this.sendregis = false
        this.regisin = true
        this.iphones = '手机号错误'
        this.showToast()
      } else {
        this.isregist = false
        this.sendregis = true
        this.regisin = false
      }
    }
  },
  methods: {
  showToast() {
    this.$popups(this.iphones)
  }
  }
}
</script>

<style lang="stylus" scoped>
  input
    display: block
    width: 90%
    height: 40px
    margin: 0 auto
    margin-bottom: 40px
    line-height: 40px
    font-size: 15px
    color: #999
    border-radius: 3px
    border: 1px solid #999
  .register
    width: 100%
    background: #eee
    .body
      width: 1280px
      height: 900px
      margin: 0 auto
      .top
          width: 1000px
          height: 100px
      .left
        width: 580px
        height: 500px
        float:left
        .left-img
          width: 580px
          height: 500px
      .right
        width: 700px
        height: 500px
        float:left
        .content
          width: 700px
          height: 500px
          .loginend
            width: 375px
            height: 500px
            background: #fff
            .log
              border: 0
              font-size: 18px
              color: #fff
              border-radius: 20px
            .regid_active
              background: #00bcd4
            .regis_begin
              background: #02bf03
            .title
              width: 90%
              height: 80px
              margin: 0 auto
              line-height: 120px
              font-size: 18px
              font-weight: bold
              border-bottom: 1px solid #999
              margin-bottom: 40px
            .reged
              width: 90%
              height: 100px
              line-height: 100px
              font-size: 16px
              margin: 0 auto
              text-align: center
</style>
